<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery横向手风琴效果</title>

<link type="text/css" rel="stylesheet" href="css/style.css" />

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $(".nav_item").removeClass("active");
    $("#nav_index").addClass("active");

    var $centerwell_first = $('#centerwell li:first');
    $centerwell_first.animate({ width: '545px' }, 300);
    $centerwell_first.find('h3').addClass("on");

    $('#centerwell li').click(function () {
        if (!$(this).is(':animated')) {
            $(this).animate({ width: '545px' }, 300).siblings().animate({ width: '100px' }, 300);

            $('#centerwell li h3').removeClass("on");
            $(this).find("h3").addClass("on");
        }
    });
});
</script>

</head>
<body>

<div class="box2">
	<div class="banner_tit">动漫人物</div>
	<div class="hot_role">
		<ul id="centerwell">
			<li>
            <h3><img  src="images/1.jpg"></h3>
				<div class="hot_content">
                <div class="hot_left">
                介绍一
                </div>
                </div>
			</li>
			<li>
            <h3><img  src="images/2.jpg"></h3>
				<div class="hot_content">
                <div class="hot_left">
                介绍二
                </div>
                </div>
			</li>
		</ul>
	</div>
</div>


</body>
</html>
